<template>
    <div>
        <div style="border:1px solid #BFBFBF;padding: 10px;background-color: white">
            <template>
                <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
                    <el-tab-pane label="客户生日" name="first">
                        <div style="margin-top: 10px;height: 468px;">
                            <!--上-->
                            <div>
                                <el-date-picker
                                        v-model="birarr"
                                        type="daterange"
                                        align="right"
                                        :clearable="isnotrue"
                                        unlink-panels
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        :picker-options="pickerOptions2"
                                        value-format="MM-dd"
                                >
                                </el-date-picker>
                                <el-button @click="selectbir()" style="margin-left: 20px" size="medium" type="primary" plain>搜索</el-button>
                                <el-button @click="editbirnull()" style="margin-left: 10px" size="medium" type="primary" plain>重置</el-button>

                            </div>
                            <!--中-->
                            <div style="margin-top: 15px;border: 1px solid #BFBFBF;background-color: white">
                                <el-table
                                        ref="multipleSelection"
                                        :data="caretableData"
                                        style="width: 100%"
                                        height="360"
                                        :default-sort = "{prop: 'date', order: 'descending'}"
                                        @selection-change="handleSelectionChange">
                                    <el-table-column
                                            prop="linkmanId"
                                            type="selection">
                                    </el-table-column>
                                    <el-table-column
                                            fixed
                                            label="姓名"
                                            align="center">
                                        <template slot-scope="sp">
                                            <a v-html="sp.row.linkmanName" class="businame"></a>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="linkmanMobile"
                                            label="电话"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            label="生日"
                                            align="center">
                                        <template slot-scope="sp">
                                            {{sp.row.linkmanBirthday | formatDate}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="linkmanSite"
                                            label="地址"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="clientId.clientName"
                                            label="客户"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="linkmanSex"
                                            label="性别"
                                            align="center">
                                    </el-table-column>
                                </el-table>
                            </div>
                            <!--下-->
                            <div style="margin-top: 15px">
                                <div style="margin-left: 300px">
                                    <el-pagination
                                        @current-change="handleCurrentChange"
                                        @size-change="handleSizeChange"
                                        :current-page="currentPage"
                                        :page-sizes="sizes"
                                        :page-size="pagesize"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="pagetotal"
                                    />
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="客户生日服务设置" name="second">
                        <div>
                           <div>
                               <template>
                                   <el-tabs v-model="activeName">
                                       <el-tab-pane label="任务设置" name="first">
                                           <div>
                                               <el-form :label-position="formright" v-model="setcare" label-width="100px" >
                                                   <el-form-item label="客户范围">
                                                       <div>
                                                           <span>
                                                                   全部客户
                                                           </span>
                                                       </div>
                                                   </el-form-item>
                                                   <el-form-item label="祝福短信内容" required>
                                                       <div>
                                                           <el-input v-model="setcare.setcaId" style="display: none"/>
                                                           <el-input type="textarea" placeholder="添加祝福" id="log-text"
                                                                     style="resize:none;height: 120px;width: 372px"
                                                                     cols="15" rows="5" v-model="setcare.setcaContext"></el-input>
                                                       </div>
                                                   </el-form-item>
                                                   <el-form-item label="发送时间" style="margin-top: 10px" required>
                                                       <div>
                                                           <el-time-select
                                                                   @change="settime"
                                                               v-model="setcare.setcaTime"
                                                               :picker-options="{
                                                                    start: '08:30',
                                                                    step: '00:15',
                                                                    end: '18:30'
                                                                }"
                                                               placeholder="选择时间">
                                                           </el-time-select>
                                                       </div>
                                                   </el-form-item>
                                                   <el-form-item label="内容变量说明">
                                                       <div style="color: #BFBFBF">
                                                           <span>
                                                               祝福内容变量中的使用
                                                           </span><br/>
                                                           <span>
                                                               {称呼}标企业联系人的称呼或个人客户的称呼变量为@var(name)，自动发送为联系人名称
                                                           </span><br/>
                                                           <span>
                                                               {性别}标企业联系人的称呼或个人客户的性别变量为@var(sex)，自动发送为联系人性别
                                                           </span>

                                                       </div>
                                                   </el-form-item>
                                               </el-form>
                                               <el-button @click="editsetca()" style="margin-left: 20px" size="medium" type="primary" plain>设置</el-button>
                                               </div>
                                       </el-tab-pane>
                                       <el-tab-pane label="发送历史" name="two">
                                           <!--上-->
                                           <div>
                                               <el-date-picker
                                                       v-model="setarr"
                                                       type="daterange"
                                                       align="right"
                                                       unlink-panels
                                                       :clearable="isnotrue"
                                                       range-separator="至"
                                                       start-placeholder="开始日期"
                                                       end-placeholder="结束日期"
                                                       :picker-options="pickerOptions2"
                                                       value-format="MM-dd"
                                               >
                                               </el-date-picker>
                                               <el-button @click="selectbirls()" style="margin-left: 20px" size="medium" type="primary" plain>搜索</el-button>
                                               <el-button @click="editnull()" style="margin-left: 10px" size="medium" type="primary" plain>重置</el-button>

                                           </div>
                                           <!--中-->
                                           <div style="margin-top: 15px;border: 1px solid #BFBFBF;background-color: white">
                                               <el-table
                                                       :data="caretablelist"
                                                       style="width: 100%"
                                                       max-height="320"
                                                       :default-sort = "{prop: 'date', order: 'descending'}"
                                                       @selection-change="handleSelectionChange">
                                                   <el-table-column
                                                           type="selection"
                                                           prop="careId">
                                                   </el-table-column>
                                                   <el-table-column
                                                           prop="linkmanId.linkmanName"
                                                           label="姓名"
                                                           align="center">
                                                   </el-table-column>
                                                   <el-table-column
                                                           prop="linkmanId.linkmanMobile"
                                                           label="电话"
                                                           align="center">
                                                   </el-table-column>
                                                   <el-table-column
                                                           label="生日"
                                                           align="center">
                                                       <template slot-scope="sp">
                                                           {{sp.row.linkmanId.linkmanBirthday | formatDate}}
                                                       </template>
                                                   </el-table-column>
                                                   <el-table-column
                                                           prop="linkmanId.linkmanSite"
                                                           label="地址"
                                                           align="center">
                                                   </el-table-column>
                                                   <el-table-column
                                                           prop="linkmanId.clientId.clientName"
                                                           label="客户"
                                                           align="center">
                                                   </el-table-column>
                                               </el-table>
                                           </div>
                                           <!--下-->
                                           <div style="margin-top: 15px">
                                               <div style="margin-left: 300px">
                                                   <el-pagination
                                                           @current-change="chandleCurrentChange"
                                                           @size-change="chandleSizeChange"
                                                           :current-page="currentPage"
                                                           :page-sizes="csizes"
                                                           :page-size="cpagesize"
                                                           layout="total, sizes, prev, pager, next, jumper"
                                                           :total="cpagetotal"
                                                   />
                                               </div>
                                           </div>
                                       </el-tab-pane>
                                   </el-tabs>
                               </template>
                           </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="节日自动服务" name="third">
                        <div>
                            <el-form v-model="festivalsetcare" :label-position="formright" label-width="100px" >
                                <el-form-item label="客户范围">
                                    <div>
                                        <span>
                                           全部客户
                                        </span>
                                    </div>
                                </el-form-item>
                                <el-form-item label="祝福短信内容" required>
                                    <div>
                                        <el-input v-model="festivalsetcare.setcaId" style="display: none"/>
                                        <el-input type="textarea" placeholder="添加祝福" id="log-text2"
                                                  style="resize:none;height: 120px;width: 372px"
                                                  cols="15" rows="5" v-model="festivalsetcare.setcaContext"></el-input>
                                    </div>
                                </el-form-item>
                                <el-form-item label="发送时间" style="margin-top: 10px" required>
                                    <div>
                                        <el-time-select
                                                @change="settime"
                                                v-model="festivalsetcare.setcaTime"
                                                :picker-options="{
                                                                    start: '08:30',
                                                                    step: '00:15',
                                                                    end: '18:30'
                                                                }"
                                                placeholder="选择时间">
                                        </el-time-select>
                                    </div>
                                </el-form-item>

                                <el-form-item label="内容变量说明">
                                    <div style="color: #BFBFBF">
                                        <span>
                                           祝福内容变量中的使用
                                        </span><br/>
                                        <span>
                                           {称呼}标企业联系人的称呼或个人客户的称呼变量为@var(name)，自动发送为联系人名称
                                        </span><br/>
                                        <span>
                                           {性别}标企业联系人的称呼或个人客户的性别变量为@var(sex)，自动发送为联系人性别
                                        </span>
                                    </div>
                                </el-form-item>
                            </el-form>
                            <el-button @click="editfestivalsetcare()" style="margin-left: 20px" size="medium" type="primary" plain>设置</el-button>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </template>
        </div>
    </div>
</template>

<script>
    import {formatTimeToStr} from '../router//format.js'
    export default {
        name: "Dcare",
        data() {
            return {
                isnotrue:false,

                /*节日祝福对象*/
                festivalsetcare:{
                    setcaId:0,
                    setcaContext:'',
                    setcaTime:''
                },//设置节日祝福

                caretablelist:[],//生日祝福发送历史
                /*生日发送历史列表分页*/
                cpagesize:7,//页大小
                ccurrentPage:1,//当前页
                cpagetotal:0,//总页数
                csizes:[5,7,10,12],//每页数据条

                /*生日祝福对象*/
                setcare:{
                    setcaId:0,
                    setcaContext:'',
                    setcaTime:''
                },

                multipleSelection:[],//添加客户复选框

                birarr:'',//查询生日期间

                setarr:'',//生日发送记录

                /*客户生日列表分页*/
                pagesize:7,//页大小
                currentPage:1,//当前页
                pagetotal:0,//总页数
                sizes:[5,7,10,12],//每页数据条
                /*表单向右数据*/
                formright:'right',
                activeName2: 'first',
                /*生日数值服务*/
                activeName: 'first',
                /*日期选择器*/
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },

                //生日列表表格
                caretableData: [],

            };
        },
        methods: {
            /*初始化发送历史和日期查询*/
            initsetcare(setarr){
                this.$axios.post("http://localhost:8088/care/selectcare",this.qs.stringify(
                    {setarr:setarr+"",currentpage:this.ccurrentPage,pagesize:this.cpagesize}
                )).then(v=>{
                    this.caretablelist=v.data.rows;
                    this.cpagetotal=v.data.total;
                }).catch(()=>{

                })
            },

            /*初始化生日列表和日期查询*/
            init(birarr){
                this.$axios.post("http://localhost:8088/care/selectBirth",this.qs.stringify(
                    {birarr:birarr+"",currentpage:this.currentPage,pagesize:this.pagesize}
                )).then(v=>{
                    this.caretableData=v.data.rows;
                    this.pagetotal=v.data.total;
                }).catch(()=>{

                })

            },

            /*初始化祝福模板*/
            initset(){
                this.$axios.post("http://localhost:8088/care/selectsetca").then(v=>{
                    this.setcare=v.data
                }).catch(()=>{

                })
                this.$axios.post("http://localhost:8088/care/selectfestivalsetce").then(v=>{
                    this.festivalsetcare=v.data
                }).catch(()=>{

                })

            },

            /*生日日期搜索*/
            selectbir(){
                this.print("数据："+this.birarr)
                this.init(this.birarr);
            },

            /*发送日期搜索*/
            selectbirls(){
                this.print("数据："+this.setarr)
                this.initsetcare(this.setarr);
            },

            /*发送搜索重置*/
            editnull(){
                this.setarr='';
                this.print("数据："+this.setarr)
                this.initsetcare(this.setarr);
            },

            /*生日列表搜索重置*/
            editbirnull(){
                this.birarr='';
                this.print("数据："+this.birarr)
                this.init(this.birarr);
            },

            settime(){
                this.print(this.value1);
            },

            /*修改生日祝福模板*/
            editsetca(){
                this.$axios.post("http://localhost:8088/care/editsetca",this.setcare).then(() => {
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });

                }).catch(() => {
                });
            },

            /*修改节日祝福模板*/
            editfestivalsetcare(){
                this.$axios.post("http://localhost:8088/care/editfestivalsetcare",this.festivalsetcare).then(() => {
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });

                }).catch(() => {
                });
            },


            //添加客户复选框选中的
            handleSelectionChange(val) {
                this.multipleSelection = val;//  this.multipleSelection 选中的值

            },
            handleClick(tab, event) {
                window.console.log(tab, event);
            },
            /*客户生日分页数方法*/
            handleSizeChange(val) {
                window.console.log(`每页 ${val} 条`);
                this.pagesize=val;
                this.init();
            },
            /*客户生日当前页方法*/
            handleCurrentChange(val) {
                window.console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.init()
            },
            /*发送历史分页数方法*/
            chandleSizeChange(val) {
                window.console.log(`每页 ${val} 条`);
                this.cpagesize=val;
                this.initsetcare(this.setarr);
            },
            /*发送历史当前页方法*/
            chandleCurrentChange(val) {
                window.console.log(`当前页: ${val}`);
                this.ccurrentPage=val;
                this.initsetcare(this.setarr)
            },
        },
        created: function () {
            this.init(this.birarr);
            this.initset();
            this.initsetcare(this.setarr);
        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd");
                } else {
                    return "";
                }
            }
        }
    }
</script>

<style scoped>

</style>